<template>
	<div>
		<jk-dialog
			v-model="showDialog"
			title="合并生产-提示"
			width="1000px"
			:confirm-btn-loading="confirmBtnLoading"
			@on-visible-change="onVisibleChange"
			@on-cancel="onVisibleChange(false)"
			@on-confirm="onConfirmBtn"
		>
			<div ref="box1" class="flex-start-center margin-bottom-10">
				<el-tag type="warning" class="el-icon-question" size="mini">
					检测到有
					<b style="font-size: 14px;">{{ tableData.length || 0 }}</b>
					个机台需要"合并生产"。合并条件：“同品种+同批号+未了机”
				</el-tag>
			</div>
			<jk-table
				ref="jkTable"
				:data="tableData"
				border
				:height="dialogTableHeight - 30"
			>
				<vxe-table-column type="seq" title="序号" align="center" :width="50" />
				<vxe-table-column field="machineName" title="细纱机" :width="70" />
				<vxe-table-column field="ltMachineName" title="络筒机" :width="70" />
				<vxe-table-column field="openingState" title="状态" align="center" :width="80">
					<template slot-scope="scope">
						<jk-state-bar :state="scope.row.openingState" :state-list="openStateList"></jk-state-bar>
					</template>
				</vxe-table-column>
				<vxe-table-column field="productName" title="品种" :min-width="120"> </vxe-table-column>
				<vxe-table-column field="batchCode" title="批号" :min-width="120"> </vxe-table-column>
				<vxe-table-column field="startTime" title="开台时间" :width="150" />
				<vxe-table-column field="productOrderCode" title="生产订单" :width="150" />
				<vxe-table-column field="code" title="翻改任务编号" :width="150" />
			</jk-table>
		</jk-dialog>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import { openStateList } from '@/utils/jk/status-option-list';
    export default {
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            tableData: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        mixins: [calHeight],
        data() {
            return {
                openStateList: openStateList,
                showDialog: false,
                confirmBtnLoading: false
            };
        },
        methods: {
            onConfirmBtn() {
                this.$emit('on-finish');
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                }
            }
        }
    };
</script>
